<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css"/>

    <!-- The Templates -->
    <script type="text/template" id="home">

        <div data-role="header">
            <h1>Backbone.js + jQuery Mobile</h1>
        </div>

        <div data-role="content">
            <h3>Yoga Script Application</h3>
            <p>jqury.mobile version</p>
            <ul data-role="listview"  data-inset="true">
                <li><a href="#page1">Workout</a></li>
                <li><a href="#page2">Schedule</a></li>
                <li><a href="#page3">Sequences</a></li>
                <li><a href="#page4">Poses</a></li>
            </ul>
        </div>

    </script>

    <script type="text/template" id="page1">

        <div data-role="header">
            <a href="#" data-icon="back" class="back ui-btn-left">Back</a>
            <h1>Workout</h1>
        </div>

        <div data-role="content">
            <p>Play current sequence</p>
            <p>Navigate to:</p>
            <ul data-role="listview" data-inset="true">
                <li><a href="#page1">Prev Pose</a></li>
                <li><a href="#page1">Next Pose</a></li>
            </ul>
        </div>

    </script>

    <script type="text/template" id="page2">

        <div data-role="header">
            <a href="#" data-icon="back" class="back ui-btn-left">Back</a>
            <h1>Schedule</h1>
        </div>

        <div data-role="content">
            <p>Schedule</p>
            <p>Navigate to:</p>
            <ul data-role="listview" data-inset="true">
                <li><a href="#page2">Previous week</a></li>
                <li><a href="#page2">Next week</a></li>
            </ul>
        </div>

    </script>

    <script type="text/template" id="page3">

        <div data-role="header">
            <a href="#" data-icon="back" class="back ui-btn-left">Back</a>
            <h1>Sequences</h1>
        </div>

        <div data-role="content">
            <p>Sequences</p>
            <p>Navigate to:</p>
            <ul data-role="listview" data-inset="true">
                <li><a href="#page3">Previous sequence</a></li>
                <li><a href="#page3">Next sequence</a></li>
            </ul>
        </div>

    </script>

    <script type="text/template" id="page4">

        <div data-role="header">
            <a href="#" data-icon="back" class="back ui-btn-left">Back</a>
            <h1>Poses</h1>
        </div>

        <div data-role="content">
            <p>Poses</p>
            <p>Navigate to:</p>
            <ul data-role="listview" data-inset="true">
                <li><a href="#page4">Previous pose</a></li>
                <li><a href="#page4">Next pose</a></li>
            </ul>
        </div>

    </script>
    
    <!-- The Scripts -->
    <script src="lib/jquery-1.7.1.min.js"></script>
    <script src="js/jqm-config.js"></script>
    <script src="lib/jquery.mobile-1.0.1.min.js"></script>
    <script src="lib/underscore-min.js"></script>
    <script src="lib/backbone-min.js"></script>
    <script src="js/main.js"></script>
</head>

<body></body>

</html>